<template>
  <div
    style="
      min-height: 630px;
      padding: 3px;
      background-color: rgba(255, 255, 255, 1);
    "
  >
    <row style="margin-top: 20px" type="flex" justify="start" :gutter="5">
      <col span="24" />
      <Input
        v-model="bloc.deviceResetModel.deviceSn"
        style="width: 180px; margin-right: 10px"
        placeholder="设备编号"
      ></Input>
      <Input
        v-model="bloc.deviceResetModel.accountName"
        style="width: 180px; margin-right: 10px"
        placeholder="操作人员"
      ></Input>
      <Button
        icon="ios-search"
        type="primary"
        style="margin-right: 5px"
        @click="bloc.getDeviceResetList(1, bloc.deviceReset.pageSize, 'DESC', bloc.deviceResetModel)"
        >查询
      </Button>
      <Button icon="md-refresh" @click="reset">重置 </Button>
      <!--      </col>-->
    </row>
    <div style="margin-top: 20px">
      <Table
        border
        ref="selection"
        :columns="columns4"
        :data="bloc.deviceReset.items"
        @on-selection-change="tableSelet"
      >
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.deviceReset.itemCount"
            :current="bloc.deviceReset.pageIndex"
            :page-size="bloc.deviceReset.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="
              (val) => bloc.getDeviceResetList(val, bloc.deviceReset.pageSize, 'DESC')
            "
            @on-page-size-change="
              (val) => {
                bloc.deviceReset.pageSize = val;
                bloc.getDeviceResetList(1, bloc.deviceReset.pageSize, 'DESC');
              }
            "
          />
        </slot>
      </Table>
    </div>


  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { DevicesBloc } from "./DevicesBloc";
import { Route } from "vue-router";
import AgentSelector from "@/component/AgentSelector.vue";
import AgentSelectorSingle from "@/component/AgentSelectorSingle.vue";
import CompanySeletorSingle from "@/component/CompanySeletorSingle.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { formatDate } from "@/base/util/Dates";
import { Loading } from "@/base/Loading";
import { isEmpty } from "@/base/util/Strings";
import { store } from "@/store/Store";

@Component({
  components: { AgentSelector, CompanySeletorSingle, AgentSelectorSingle },
})
export default class extends Vue {
  Validation = Validation;
  Resources = Resources;
  IsEmpty = isEmpty;
  @Prop({ type: Number })
  readonly init!: number;
  bloc = new DevicesBloc();
  formDate = formatDate;
  resItems: any = [];
  total: number = 0;
  pageSize: number = 15;
  deviceResetModel: any = {
    deviceSn: "",
    accountName: "",
  };
  columns4: any = [
    {
      type: "selection",
      width: 40,
      align: "left",
    },
    {
      title: "id",
      key: "id",
      align: "left",
      width: 200,
      tooltip: true,
    },
    {
      title: "设备编号",
      key: "deviceSn",
      align: "left",
      width: 300,
      tooltip: true,
    },
    {
      title: "操作人员",
      key: "accountName",
      align: "left",
      width: 300,
      tooltip: true,
    },
    {
      title: "操作时间",
      key: "created",
      align: "left",
      render: (h: any, params: any) => {
        return h("span", {
          domProps: {
            innerText: formatDate(
              new Date(params.row.created),
              "yyyy-MM-dd hh:mm:ss"
            ),
          },
        });
      },
      tooltip: true,
    },
  ];


  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.getDeviceResetList(
        vm.bloc.deviceReset.pageIndex,
        vm.bloc.deviceReset.pageSize,
        "DESC",
        vm.bloc.deviceResetModel
      );
    });
  }

  reset() {
    this.bloc.deviceResetModel = {
      deviceSn: '',
      accountName: ''
    };
    this.bloc.getDeviceResetList(
      this.bloc.deviceReset.pageIndex,
      this.bloc.deviceReset.pageSize,
      "DESC",
      this.bloc.deviceResetModel
    );
  }


}
</script>
<style lang="less" scoped>
.blue {
  color: #559df9;
}

/deep/ .ivu-form-item-error-tip {
  padding-top: 38px;
}

.red {
  color: red;
}
</style>
